<template>
	<view class="container position-relative">
		<image @click="toPage('/filePage/pages/cart/cart')" :src="baseUrl + '/static/cart2.png'" mode=""
			style="width: 112rpx;height: 112rpx;position: fixed;bottom: 148rpx;right: 50rpx;z-index: 10;"></image>
		<kg-custom :isBack="true" bgColor="bg-color" backColor="text-white">
			<block slot="left">
				<view v-if="service_type!=1" class="flex justify-start align-center round bg-white"
					style="width: 460rpx;height: 60rpx;padding-left: 34rpx;">
					<image :src="baseUrl + '/static/search_for.png'" mode="" style="width: 26rpx;height: 26rpx;">
					</image>
					<input type="text" confirm-type="search" @confirm="search" v-model="keywords" class="margin-left-sm text-13" value="" placeholder="商品名称" />
				</view>
			</block>
		</kg-custom>
		<view class="bg-color text-white padding-sm" style="height: 304rpx;">
			<view class="flex justify-between align-center">
				<image :src="service.logo" mode="" class="cu-avatar round lg"></image>
				<view class="flex justify-start" style="width: 442rpx;"
					@click="toPage('/filePage/pages/outlet-information/outlet-information?shopId=' + shopId)">
					<view class="margin-right-sm" style="width: calc(100% - 22rpx);">
						<view class="text-15 text-cut">
							{{service.shopName}}
						</view>
						<view class="text-sm text-cut margin-top-xs">
							{{service.address}}
						</view>
					</view>
					<view class="cuIcon-right">

					</view>
				</view>
				<image @click="toNavigation" :src="baseUrl +'/static/Promote2.png'" mode=""
					style="min-width: 38rpx;height: 38rpx;width: 38rpx;"></image>
				<image @click="callPhone" :src="baseUrl + '/static/phone.png'" mode=""
					style="min-width: 38rpx;height: 38rpx;width: 38rpx;"></image>
			</view>
			<view class="flex justify-between align-center" style="margin-top: 66rpx;">
				<view class="" style="overflow: hidden;width: 200rpx;height: 92rpx;">
					<view class="text-sm" style="margin-bottom: 20rpx;">
						服务等级
					</view>
					<uni-rate :size="18"  :readonly="true" :value="service.shopStar"  :is-fill="false"/>

					<!-- <image :src="baseUrl + '/static/star2.png'"
						v-for="(item,i) in  service.serviceOrderCount"  mode=""
						class="margin-left-xs margin-top-sm" style="width: 30rpx;height: 30rpx;"></image> -->
				</view>
				<view class="">
					<view class="text-sm">
						服务单量
					</view>
					<view class="text-17 text-bold margin-top-sm">
						{{service.serviceOrderCount}}
					</view>
				</view>
				<view class="">
					<view class="text-sm">
						技工人数
					</view>
					<view class="text-17 text-bold margin-top-sm">
						{{service.workerCount}}
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="service_type==1">
			<swiper v-if="banners.length>0" class="margin-sm" style="height: 266rpx;" :indicator-dots="true" :autoplay="true" :interval="3000"
				circular="true" :duration="1000" indicator-color="#F4F4F4" indicator-active-color="#ED7200">
				<swiper-item v-for="item in banners" @click="toLink(item)">
					<image class="width-sub height-sub radius10" :src="item.pic" mode="">
					</image>
				</swiper-item>
			</swiper>
			<view class="bg-white margin-sm padding-sm" v-if="PlatformList.length>0">
				<view class="flex justify-between align-center">
					<view class="text-17 text-221815 text-bold">
						平台商品
					</view>
					<view @click="toPage('/filePage/pages/goods-list/goods-list')" class="flex justify-start align-center text-sm text-999">
						<view class="">
							更多商品
						</view>
						<view class="cuIcon-right margin-left-xs"></view>
					</view>
				</view>
				<scroll-view scroll-x class="bg-white nav margin-top-sm" scroll-with-animation :scroll-left="0">
					<view class="position-relative" style="width: 200rpx;display: inline-block;" v-for="(item,index) in PlatformList"
						:style="index!=0?'margin-left:14rpx':''" @click="toPage('/filePage/pages/goods-detail/goods-detail?id=' + item.id)">
						<image :src="item.pic" mode="" class="radius-t-l radius-t-r"
							style="width: 200rpx;height: 200rpx;"></image>
							<view v-if="item.newStatus==1" class="text-sm text-white flex justify-center align-center"
								:style="'background-image: url(' +baseUrl+'/static/shop_bg2.png);width: 70rpx;height: 36rpx;position: absolute;top: 0;left: 0;z-index: 1;background-size: 100% 100%;'">
								新品
							</view>
						<view class="padding-xs">
							<view class="text-cut text-sm text-bold">
								{{item.name}}</view>
							<view class="margin-top-sm color text-bold">
								¥{{parseFloat(item.price/100).toFixed(2)}}
							</view>
							<view class="margin-top-sm text-11 text-999 text-delete">
								¥{{parseFloat(item.originalPrice/100).toFixed(2)}}
							</view>
						</view>

					</view>

				</scroll-view>
			</view>
			<view class="bg-white margin-sm padding-sm" v-if="GroupBuy.length>0">
				<view class="flex justify-between align-center">
					<view class="text-17 text-221815 text-bold flex justify-start align-center">
						<image :src="baseUrl + '/static/group.png'" mode="" style="width: 46rpx;height: 34rpx;">
						</image>
						<view class="margin-left-xs">
							超值团购
						</view>
					</view>
					<view @click="toPage('/filePage/pages/goods-list/goods-list?groupStatus=1')" class="flex justify-start align-center text-sm text-999">
						<view class="">
							更多团购
						</view>
						<view class="cuIcon-right margin-left-xs"></view>
					</view>
				</view>
				<scroll-view scroll-x class="bg-white nav margin-top-sm" scroll-with-animation :scroll-left="0">
					<view class="position-relative" style="width: 200rpx;display: inline-block;"
						v-for="(item,index) in GroupBuy" :style="index!=0?'margin-left:14rpx':''" @click="toPage('/filePage/pages/goods-detail/goods-detail?id=' + item.productId)">
						<view class="text-11 text-white flex justify-center align-center"
							:style="'background-image: url('+baseUrl+'/static/shop_bg.png);background-size: 100% 100%;width: 82rpx;height: 34rpx;position: absolute;top: 152rpx;left: 16rpx;z-index: 1;'">
							{{item.discount}}折
						</view>
						<image :src="item.pic" mode="" class="radius10" style="width: 200rpx;height: 200rpx;"></image>
						<view class="padding-xs">
							<view class="text-cut text-sm text-bold" style="white-space: pre-wrap;min-height: 64rpx;">
								{{item.productName}}</view>
								<view class="margin-top-sm color text-bold">
									¥{{parseFloat(item.groupPrice/100).toFixed(2)}}
								</view>
								<view class="margin-top-sm text-11 text-999 text-delete">
									¥{{parseFloat(item.price/100).toFixed(2)}}
								</view>
						</view>

					</view>

				</scroll-view>
			</view>
			<view v-if="ProductList.length>0" class="flex justify-between align-center margin-sm padding-top-sm radius10">
				<view class="text-17 text-bold text-221815">
					推荐商品
				</view>
				<view @click="toPage('/filePage/pages/goods-list/goods-list')" class="text-sm text-999 flex justify-start align-center">

					<view class="margin-right-xs">
						查看更多
					</view>
					<image :src="baseUrl +'/static/right.png'" mode="" style="width: 14rpx;height: 14rpx;">
					</image>
				</view>
			</view>
			<view class="list flex flex-wrap justify-start">
				<view class="item margin-top-sm radius10 position-relative" v-for="(item,index) in ProductList" :key="index"
					:class="{'.margin-left14':index%2!=0}" @click.stop="toPage('/filePage/pages/goods-detail/goods-detail?id=' + item.id)">

					<view v-if="item.newStatus==1" class="text-sm text-white flex justify-center align-center"
						:style="'background-image: url(' +baseUrl+'/static/shop_bg2.png);width: 70rpx;height: 36rpx;position: absolute;top: 0;left: 0;z-index: 1;background-size: 100% 100%;'">
						新品
					</view>
					<image :src="item.pic" mode="" class="radius-t-l radius-t-r"></image>
					<view class="padding-sm">
						<view class="text-cut text-15">
							{{item.name}}
						</view>
						<view class="color text-sm margin-top-sm">
								¥{{parseFloat(item.price/100).toFixed(2)}}
						</view>
						<view class="flex justify-between align-center margin-top-sm">
								<view class="text-sm text-999 text-delete">
										¥{{parseFloat(item.originalPrice/100).toFixed(2)}}
								</view>
							<image @click.stop="showSku(item.id)" :src="baseUrl + '/static/cart.png'" mode="" style="width: 28rpx;height: 28rpx;"></image>
						</view>
					</view>

				</view>
			</view>
		</view>
		
		<view class="flex justify-start" v-else-if="service_type==2">
			<scroll-view scroll-y="true" class="text-13 text-333"
				style="height: calc(100vh -534rpx);width: 190rpx;min-width: 190rpx;max-height: calc(100vh - 534rpx);">
				<!-- <view class=" flex justify-center align-center" style="height: 100rpx;">
					推荐商品
				</view> -->
				<view class="flex justify-center align-center" @click="choose(item)" :class="{'text-bold text-15 bg-white':item.id == tabCur}" style="height: 100rpx;" v-for="item in classification1">
					{{item.name}}
				</view>
				<!-- <view class="flex justify-center align-center" style="height: 100rpx;">
					母婴
				</view> -->
			</scroll-view>
			<scroll-view scroll-y="true" class="text-333 bg-white padding-sm"
				style="height: calc(100vh -534rpx);width:calc(100vw - 190rpx);min-width: calc(100vw - 190rpx);max-height: calc(100vh - 534rpx);">
				<view class="text-sm text-bold" style="padding: 38rpx 0 20rpx;">
					{{tabName}}
				</view>
				<view class="flex justify-start align-center position-relative" v-for="item in listByProduct" @click="toPage('/filePage/pages/goods-detail/goods-detail?id=' + item.id)">
					<view v-if="item.recommandStatus==1" class="text-sm text-white flex justify-center align-center"
						:style="'background-image: url('+baseUrl+'/static/shop_bg2.png);width: 70rpx;height: 36rpx;position: absolute;top: 0;left: 0;z-index: 1;background-size: 100% 100%;'">
						爆品
					</view>
					<image :src="item.pic" mode=""
						style="width: 200rpx;height: 200rpx;min-width: 200rpx;" class="radius10"></image>
					<view class="margin-left-sm f-grow1 text-cut">
						<view class="text-cut text-15">{{item.name}}
						</view>
						<view class="color text-sm margin-top-sm">
							评价 {{item.commentCount}}
						</view>
						<view class="margin-top flex justify-between align-center">
							
								<view class="text-17 color">
									{{parseFloat(item.price/100).toFixed(2)}}
								</view>
								<view class="text-sm text-delete text-999">¥{{parseFloat(item.originalPrice/100).toFixed(2)}}</view>
							
							<view  @click.stop="showSku(item.id)" class="text-white text-17 flex justify-center align-center"
								style="width: 38rpx;background: linear-gradient(135deg, #F3AB1F, #EE7200);border-radius: 8rpx;">
								+
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="" v-else>
			<view class="list flex flex-wrap justify-start">
				<view class="item margin-top-sm radius10 position-relative" v-for="(item,index) in GroupBuy" :key="index"
					:class="{'.margin-left14':index%2!=0}" @click="toPage('/filePage/pages/goods-detail/goods-detail?id=' + item.productId)">

					<view class="text-sm text-white flex justify-center align-center"
						:style="'background-image: url('+baseUrl+'/static/shop_bg2.png);width: 70rpx;height: 36rpx;position: absolute;top: 0;left: 0;z-index: 1;background-size: 100% 100%;'">
						团购
					</view>
					<image :src="item.pic" mode="" class="radius-t-l radius-t-r"></image>
					<view class="padding-sm">
						<view class="text-cut text-15">
							{{item.productName}}
						</view>
						<view class="color text-sm margin-top-sm">
								¥{{parseFloat(item.groupPrice/100).toFixed(2)}}
						</view>
						<view class="flex justify-between align-center margin-top-sm">
								<view class="text-sm text-999 text-delete">
										¥{{parseFloat(item.price/100).toFixed(2)}}
								</view>
							<image :src="baseUrl + '/static/cart.png'" mode="" style="width: 28rpx;height: 28rpx;"></image>
						</view>
					</view>

				</view>
			</view>
			<view class="" style="height: 120rpx;"></view>
		</view>
		<view class="" style="height: 120rpx;"></view>
		<view class="cu-bar tabbar bg-white text-333">
			<view class="action" @click="changeService(1)">
				<view class="cuIcon-cu-image">
					<image v-if="service_type==1" :src="baseUrl + '/static/Outlets.png'"></image>
					<image v-else :src="baseUrl + '/static/Outlets2.png'"></image>
				</view>
				<view :class="{'color':service_type==1}">网点</view>
			</view>
			<view class="action" @click="changeService(2)">
				<view class="cuIcon-cu-image">
					<image v-if="service_type==2" :src="baseUrl + '/static/good.png'"></image>
					<image v-else :src="baseUrl + '/static/good2.png'"></image>
				</view>
				<view :class="{'color':service_type==2}">商品</view>
			</view>
			<view class="action" @click="changeService(3)">
				<view class="cuIcon-cu-image">
					<image v-if="service_type==3" :src="baseUrl + '/static/group4.png'"></image>
					<image v-else :src="baseUrl + '/static/group5.png'"></image>
				</view>
				<view :class="{'color':service_type==3}">团购</view>
			</view>
		</view>
		<!--底部 sku 选择弹窗 -->
		<wui-specification :goodsInfo="goodsInfo" btnType="1" :show="show" @select="selectSku" @close="hideSku"></wui-specification>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				shopId: '',
				service: {},
				service_type: 1,
				banners:[],
				ProductList:[],
				PlatformList:[],
				GroupBuy:[],
				keywords:'',
				classification1:[],
				tabCur:'',
				tabName:'',
				listByProduct:[],
				show:false,
				goodsInfo:{},
				selectInfo: {
					difference: '请选择规格'
				}, //存放最后选中的商品
			};
		},
		computed:{
			star(){
				return 5-this.service.serviceOrderCount
			}
		},
		onLoad(options) {
			// console.log()
			if (options.shopId) {
				this.shopId = options.shopId
				this.getService()
				this.getGroupBuy()
			}
			this.getBanner()
			this.getProductList()
			this.getPlatform()
		},
		methods: {
			showSku(e) {
				this.goodsInfo = {}
				this.getInfo(e)
			},
			hideSku(e) {
				this.show = false
				this.selectInfo = e
				// console.log(e)
			},
			selectSku(options) { //点击sku弹窗中的加入购物车或结算按钮
			this.show = false
			this.selectInfo = options
					this.addCart()
			},
			async getInfo(e) {
				const [err, res] = await this.$get(this.$api.product_detail, {
					id: e
				})
				if (res) {
					this.show = true
					this.goodsInfo = res.data
				}
			},
			async addCart() {
				// console.log(this.selectInfo)
				const [err, res] = await this.$post(this.$api.car_add, {
					attributes: this.selectInfo.difference,
					buyNum: this.selectInfo.num,
					price: this.selectInfo.price,
					productId: this.goodsInfo.id,
					productImg: this.selectInfo.pic ? this.selectInfo.pic : this.goodsInfo.pic,
					productName: this.goodsInfo.name,
					shopId: this.goodsInfo.shopId,
					shopImg: this.goodsInfo.shopImg,
					shopName: this.goodsInfo.shopName,
					skuId: this.selectInfo.id
				})
				if (res) {
					// console.log(res)
					this.$util.msg('加入购物车成功')
					// setTimeout(() => {
					// 	uni.navigateBack()
					// }, 1500)
				}
			},
			toPage(url) {
				this.$util.openNewPage(url)
			},
			async getService() {
				const [err, res] = await this.$get(this.$api.shop_detail, {
					id: this.shopId
				})
				if (res) {
					this.service = res.data
					// console.log(res)

				}
			},
			callPhone(){
				uni.makePhoneCall({
				    phoneNumber: this.service.mobile //仅为示例
				});
			},
			toNavigation(){
				uni.openLocation({
				            latitude: parseFloat(this.service.latitude),
				            longitude: parseFloat(this.service.longitude),
				            success: function () {
				                console.log('success');
				            }
				        });
			},
			changeService(e){
				this.service_type = e
				if(e==3){
					this.getGroupBuy()
				}else if(e==2){
					this.getClassification()
				}else{
					this.getProductList()
					this.getPlatform()
				}
			},
			async getBanner() {
				const [err, res] = await this.$get(this.$api.home_getAdvertisementList,{
					adPositionType:2,
					adCount:99
				})
				if (res) {
					this.banners = res.data
					// console.log(res)
					
				}
			},
			async getProductList() {
				const [err, res] = await this.$get(this.$api.home_recommendProductList,{
					pageNum:1,
					pageSize:15,
					shopId:this.shopId
				})
				if (res) {
					this.ProductList = res.data.list
					// console.log(res)
				}
			},
			async getPlatform() {
				const [err, res] = await this.$get(this.$api.product_platformProductList,{
					pageNum:1,
					pageSize:15,
					productShopType:3
				})
				if (res) {
					this.PlatformList = res.data.list
					// console.log(res)
				}
			},
			async getGroupBuy() {
				const [err, res] = await this.$get(this.$api.product_groupBuyProductList,{
					pageNum:1,
					pageSize:15,
					shopId:this.shopId,
					keywords:this.keywords
				})
				if (res) {
					this.GroupBuy = res.data.list
					// console.log(res)
				}
			},
			search(){
				if(this.service_type==3){
					this.getGroupBuy()
				}else if (this.service_type==2){
					this.getClassification()
				}
			},
			async getClassification() {
				const [err, res] = await this.$get(this.$api.home_categoryTreeList,{
					type:1
				})
				if (res) {
					this.classification1 = res.data
					if(this.classification1.length>0){
						this.tabCur = this.classification1[0].id
						this.tabName =  this.classification1[0].name
						this.getlistByProduct()
					}
					
				}
			},
			async getlistByProduct() {
				const [err, res] = await this.$get(this.$api.product_listByProductQueryParam,{
					firstCategoryId:this.tabCur,
					pageNum:1,
					pageSize:100,
					shopId:this.shopId,
					name:this.keywords
				})
				if (res) {
					this.listByProduct = res.data.list
				}
			},
			choose(e){
				this.tabCur = e.id
				this.tabName =  e.name
				this.getlistByProduct()
			},
			toLink(e){
				if(e.redirectType==1){
					this.$util.openNewPage('/filePage/pages/open-link/open-link?url=' + e.redirectUrl)
				}else{
					this.$util.openNewPage('/filePage/pages/goods-detail/goods-detail?id=' + e.redirectUrl)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		padding: 0 20rpx;

		.item {
			image {
				width: 100%;
				height: 348rpx;
			}

			background: #fff;
			width: 348rpx;
		}
	}

	.cu-bar.tabbar {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 2;
	}
</style>
